<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    #cats li {
        background-color: pink;
        height: 40px;
        line-height: 40px;
        position: relative;
        color: white;
        padding: 10px;
    }
    #cats li:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;  /*有点粗怎么办？0.5px 小数 小数不存在的，会自动取整
        屏幕由发光元器件组成，每个元器件都可以独立的去显示颜色*/
        background-color: green;
        /* 变形属性 */
        transform: scaleY(0.5);
    }

    </style>
</head>
<body>
    <ul id="cats"></ul>
    <script>
    // 对象数组
    const cats = [
        {
            name: 'Snickers',
            age: 2
        },
        {
            name: 'Hugo',
            age: 1
        },
        {
            name: 'Sunny',
            age: 3
        }
    ];
    // 相比于计数（面向机器）， 面向人类的编程， 可读性更好
    const oUL = document.getElementById('cats');
        // oUL.innerHTML += `
        //     <li>
        //         ${cat.name} --  ${cat.age}
        //     </li>
        // `
        oUL.innerHTML=cats.map((cat)=>`
        <li>
         名字:${cat.name} -- 年龄：${cat.age}
        </li>
    `).join('');
    </script>
</body>
</html>